Catégories sur la page d'accueil

Catégories de documentation CC sur la page d'accueil de PrestaShop

Documentation complète pour le module d'affichage des catégories de la page d'accueil de PrestaShop (cc_ps_home_categories) avec des options de style avancées, des modes d'affichage multiples et un contrôle total de l'apparence des catégories.

Table des matières

1. Introduction
2. Installation
3. Activation de la licence
4. Panel de gestion
5. Paramètres généraux
6. Styles d'affichage
7. Configuration des images
8. Sélection de la catégorie
9. Personnalisation de l'apparence
10. Réactivité
11. Résolution de problèmes
12. FAQ

1. Introduction

CC PrestaShop Categories Home est un module avancé qui vous permet d'afficher élégamment les catégories sur la page d'accueil de votre boutique. Le module offre une large gamme de styles d'affichage, des grilles classiques aux sliders modernes, vous donnant un contrôle total sur l'apparence et la fonctionnalité.

Fonctions du module principal :

• 7 styles de grille différents (classique, moderne, minimaliste, coloré, élégant, mode sombre, bordé clair)
• Slider avec navigation et prise en charge des gestes tactiles
• 3 modes de liste (horizontale, verticale, compacte)
• Contrôle total de la sélection des catégories
• Options avancées pour les images
• Conception adaptée
• Système de licence COCOS
• Service multilingue
• Animations et effets de transition
• Peut être placé dans différents points d'ancrage

2. installation

Exigences du système

• PrestaShop 1.7.0.0 ou plus récent
• PHP 7.2 ou version ultérieure
• MySQL 5.6 ou plus récent
• Permission d'installer des modules
• 256 Mo de RAM au minimum (512 Mo recommandés)
• Extension GD pour le traitement des images

Processus d'installation

1. Télécharger le fichier ZIP du module depuis la boutique officielle cocos.codes
2. Se connecter au panneau d'administration de PrestaShop
3. Allez dans : Modules > Gestionnaire de modules > Ajouter un nouveau module
4. Cliquez sur "Ajouter un module" et sélectionnez le fichier ZIP téléchargé.
5. Une fois l'installation terminée, cliquez sur "Configurer"
6. Le module s'enregistre automatiquement dans l'afficheurConnexion à la maison

3. Activation de la licence

Avant de pouvoir utiliser toutes les fonctionnalités du module, il est nécessaire d'activer la licence :

1. Après l'installation, procéder à la configuration du module
2. Sélectionnez l'onglet "Licence
3. Saisir la clé de licence reçue après l'achat
4. Cliquez sur "Activer la licence"
5. Le système vérifiera la validité des licences sur les serveurs COCOS.
6. Une fois l'activation réussie, un message de confirmation s'affiche

4 Panneau de gestion

Le panneau de gestion du module se compose de plusieurs onglets permettant une configuration complète :

Principaux onglets :

• Paramètres - configuration du module principal (disponible uniquement avec une licence valide)
• Documentation - lien vers la documentation complète en ligne
• Soutien - lien vers la page d'assistance technique de COCOS
• Plug-ins - liste des extensions COCOS disponibles
• Licence - gestion des licences de modules

Le système redirige automatiquement vers l'onglet licence si la clé n'est pas active, offrant ainsi un processus de configuration intuitif.

5. paramètres généraux

Dans la section des paramètres généraux, vous trouverez les options de base qui contrôlent le fonctionnement du module :

Paramètres	Description	Valeur par défaut
Mise sous tension du module	Activation/désactivation de l'affichage global	Sur
Afficher le titre de la section	Affichage de l'en-tête au-dessus des catégories	Sur
Titre de la section	Texte d'en-tête multilingue	"Nos catégories
Limite de catégorie	Nombre maximal de catégories (1-50)	6

Fonctionnement de l'interrupteur principal

• Sur - les catégories sont visibles sur la page d'accueil en fonction de la configuration
• Arrêt - le module n'affiche aucune catégorie

6. styles d'affichage

Le module propose 11 styles différents d'affichage des catégories, répartis en 3 groupes principaux :

Styles de grille

Style	Description	Utilisation recommandée
grille_classique	Cartes classiques avec cadres et ombres	Magasins universels
grille_moderne	Dégradé d'arrière-plan avec superposition sur les images	Marques modernes
grille_minimale	Des cartes épurées et minimalistes	Magasins haut de gamme
grille_colorée	Cadres colorés avec animations	Magasins pour enfants/jeunes
grid_elegant	Cartes élégantes avec accents dorés	Marques de luxe
grid_dark	Thème sombre avec effets de lumière	Jeux/électronique
grid_light_bordered	Cartes lumineuses avec bordures transparentes	Magasins d'entreprise

Lister les styles

Style	Description	Utilisation recommandée
liste_horizontale	Cartes illustrées horizontales à gauche	Pages des catégories principales
liste_verticale	Cartes verticales en colonnes	Sections étroites
liste_compacte	Liste compacte avec petites images	Barre latérale, pied de page

Styles de curseur

• slider_classic - Curseur élégant avec navigation et recouvrement par survol

7. configuration des images

Le module offre un contrôle total sur l'affichage des images des catégories :

Taille des conteneurs

Taille	Hauteur	Recommandé pour
petit	150px	Systèmes compacts
moyen	250px	Affichage standard
important	350px	Des présentations impressionnantes

Types d'images
Le système détecte automatiquement les types d'images disponibles définis dans PrestaShop pour les catégories :

• catégorie_défaut - type standard pour la catégorie

Images de repli
Si une catégorie n'a pas d'image attribuée, le système affiche automatiquement une image de remplacement par défaut. no-image-category.jpg.

8 Sélection de la catégorie

Le module propose deux modes de sélection des catégories à afficher :

Mode automatique
Le système sélectionne automatiquement les catégories principales en fonction de leur position :

• Sauter la catégorie de la racine (ID : 1)
• Sauter la catégorie principale du magasin
• Trie par position dans l'arbre des catégories
• Sélectionne uniquement les catégories actives
• Respecte la limite fixée

Mode manuel
L'administrateur peut sélectionner manuellement des catégories spécifiques :

• Liste des identifiants de catégories séparés par des virgules
• Exemple : 2,5,8,12
• Le système vérifie si les catégories existent et sont actives
• Ordre d'affichage dans la liste
• Saut automatique des catégories inexistantes

Validation de la catégorie
Quel que soit le mode, le système vérifie :

• La catégorie existe-t-elle dans la base de données ?
• La catégorie est-elle active ?
• La catégorie a-t-elle un nom dans la langue actuelle ?
• Si l'utilisateur a le droit de le consulter

9. ajuster l'apparence

Contrôle du contenu

Option	Fonction	Par défaut
Afficher les noms des catégories	Affichage des titres de catégories	Activé
Afficher les descriptions des catégories	Affichage des descriptions (abrégées)	Activé
Nombre de colonnes	Division en grille (1-6 colonnes)	3

Comportement réactif
Le système adapte automatiquement le nombre de colonnes :

• Bureau - nombre total de colonnes
• Tablette - 2-3 colonnes maximum
• Mobile - toujours 1 colonne

Effets et animations

• Fondu pendant le chargement de la page
• Effets de survol sur les cartes
• Transitions douces
• Animations de révélation du défilement
• États de chargement des images

Réactivité du curseur
Slider automatiquement :

• Ajuste le nombre d'éléments visibles
• Prise en charge de gestyswipe sur les appareils tactiles
• Affiche/masque la navigation selon les besoins
• Maintient le rapport d'aspect sur différents écrans

10 Réactivité

Le module est entièrement réactif et s'adapte automatiquement aux différentes tailles d'écran :

Points d'arrêt

Dispositif	Largeur	Colonnes	Comportement
Bureau	> 768px	Configuration complète	Affichage standard
Tablette	481-768px	Maximum 2-3	Une mise en page simplifiée
Mobile	< 480px	1	Disposition verticale

Optimisations mobiles

• Réduction automatique du remplissage et de la marge
• Typographie adaptée
• Navigation conviviale
• Taille des images optimisée
• Animations simplifiées

Styles mobiles pour les modes individuels

• Liste horizontale - se transforme en une verticale
• Liste compacte - les éléments s'empilent les uns sur les autres
• Curseur - réduit la largeur des éléments et l'espacement

11 Dépannage

Les catégories n'apparaissent pas sur la page d'accueil

1. Vérifier si le module est activé dans les paramètres généraux
2. S'assurer que la licence est active
3. Vérifier que les catégories sélectionnées sont actives dans PrestaShop
4. Effacer le cache de PrestaShop et du navigateur
5. Vérifier que le crochet displayHome est pris en charge par le modèle

Les styles CSS ne sont pas chargés

1. Vérifier que le fichier vues/css/front.css il y a
2. Assurez-vous d'être sur la page d'accueil (contrôleur : IndexController)
3. Vérifier s'il y a des conflits avec d'autres modules
4. Désactiver le cache CSS dans les paramètres de PrestaShop
5. Vérifier les droits de lecture des fichiers du module

Le curseur ne fonctionne pas correctement

1. Vérifier si la console du navigateur contient des erreurs JavaScript
2. Assurez-vous que le fichier views/js/front.js est chargé
3. Vérifier les conflits avec jQuery
4. Désactiver les autres modules du curseur pour la durée des tests
5. Vérifier que les éléments ont une structure HTML correcte

Les images ne sont pas affichées

1. Vérifier si des images ont été attribuées aux catégories
2. S'assurer que le type d'image sélectionné existe dans le système
3. Vérifier les droits d'accès aux répertoires img/c/
4. Vérifier que le fichier no-image-category.jpg il y a
5. Effacer le cache de l'image

Erreurs de licence

1. Vérifier que la clé de licence est correcte
2. Veiller à ce que le domaine soit conforme à la licence
3. Vérifier la connexion aux serveurs COCOS
4. Effacer le cache du module
5. Contacter l'assistance en cas de problèmes d'activation

12. LA FAQ

Puis-je utiliser plusieurs styles en même temps ?
Non, le module ne permet de sélectionner qu'un seul style d'affichage à la fois. Cependant, vous pouvez facilement changer de style dans les paramètres.

Comment ajouter mon propre style d'affichage ?
Les nouveaux styles nécessitent une modification des fichiers CSS et PHP. Nous vous recommandons de copier le style existant et de l'adapter à vos besoins.

Puis-je afficher des sous-catégories ?
Actuellement, le module ne prend en charge que les catégories principales. L'affichage des sous-catégories nécessite une modification du code source.

Comment modifier la position d'un module sur la page ?
Le module est automatiquement placé en première position dans le displayHome hookup. Vous pouvez modifier l'ordre dans le menu Position du panneau des modules.

Le module fonctionne-t-il avec la mise en cache ?
Oui, le module est compatible avec les systèmes de cache de PrestaShop et ne nécessite aucune configuration particulière.

Comment traduire le titre de la section ?
Le champ "Titre de la section" prend en charge toutes les langues actives dans la boutique. Changez de langue dans le panneau d'administration et saisissez la traduction.

Puis-je masquer les descriptions de catégories pour certains styles ?
L'option "Afficher les descriptions des catégories" fonctionne globalement pour tous les styles. Certains styles (comme grid_modern) affichent les descriptions dans la superposition.

Pourquoi le curseur affiche-t-il des flèches de navigation alors qu'elles ne sont pas nécessaires ?
JavaScript masque automatiquement les flèches lorsque tous les éléments entrent dans la vue. Vérifiez que les éléments ont les bonnes dimensions.

Comment fonctionne le chargement paresseux des images ?
Les images sont chargées automatiquement lorsqu'elles deviennent visibles dans la fenêtre de visualisation. Cela permet d'économiser de la bande passante et d'accélérer le chargement des pages.

Puis-je modifier l'animation du survol ?
Les animations sont définies dans le CSS de chaque style. Vous pouvez les modifier en éditant le fichier front.css.

Pourquoi certaines catégories ne sont-elles pas affichées ?
Le système ignore les catégories inactives, les catégories sans nom et les catégories pour lesquelles l'utilisateur n'a pas de droits.

Comment modifier l'image de la catégorie par défaut ?
Remplacer le fichier views/img/no-image-category.jpg sa propre image aux mêmes dimensions.

Le module prend-il en charge le format RTL (de droite à gauche) ?
Le module utilise des classes Bootstrap standard qui supportent le RTL. Il se peut que vous deviez ajuster certains styles.

Comment désactiver les animations ?
Vous pouvez supprimer ou commenter les animations CSS dans le fichier front.css ou ajouter animation : aucune ; aux sélecteurs concernés.

Puis-je modifier le nombre de descriptions de catégories ?
Les descriptions sont automatiquement raccourcies à 80-120 caractères en fonction du style. Vous pouvez modifier ce paramètre dans le fichier de modèle home_categories.tpl.

Pourquoi le module ne fonctionne-t-il pas après une mise à jour de PrestaShop ?
Vérifiez la compatibilité des versions dans le fichier du module. Il est possible que vous deviez mettre à jour le module à la dernière version.

Comment optimiser les performances pour un grand nombre de catégories ?
Utilisez le mode de sélection manuelle des catégories et limitez le nombre d'éléments à un maximum de 12. Activer le chargement paresseux et la mise en cache des images.

Puis-je utiliser le module sur des pages de catégories ?
Le module est destiné à la page d'accueil. Le placement sur d'autres pages nécessite la modification du hookew dans le code source.

Comment puis-je vérifier quels raccordements sont disponibles dans mon modèle ?
Utilisez le module "Hook displayer" ou vérifiez les fichiers de modèles dans le répertoire des modèles. Tous les modèles ne supportent pas tous les crochets.

Pourquoi les styles en mode sombre ne s'affichent-ils pas correctement ?
Les styles sombres nécessitent une enveloppe spéciale. Vérifiez que le modèle n'écrase pas les couleurs d'arrière-plan et qu'il n'y a pas de conflit avec d'autres styles.

Comment exporter la configuration du module ?
La configuration est stockée dans un tableau ps_configuration avec un préfixe CC_PS_HC_. Vous pouvez exporter ces enregistrements via phpMyAdmin.

Si vous gérez une boutique sur PrestaShop et que vous souhaitez améliorer la présentation des catégories sur la page d'accueil, nous vous recommandons d'utiliser l'option Module CC PrestaShop Catégories sur la page d'accueilqui offre un aspect professionnel et un contrôle total sur la manière dont les catégories de produits sont affichées.